<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%
    request.setAttribute("PAGE_TITLE", "预约");
%>
<jsp:include page="../../include/head.jsp"/>
<form class="form-horizontal" name="myForm" id="myForm" action="${BasePath}/order/reservation/save" method="post">
    <table id="edittable" style="width:100%;" align="center">
        <tr>
            <td colspan="4" class="column_head" style="font-size:14px;font-weight:bold;height:20px;">
                订单信息
                <input type="hidden" id="id" name="id" value="${order.id}"/>
            </td>
        </tr>
        <tr>
            <td class="column_name" width="15%">
                订单号
            </td>
            <td class="column_input" width="17%">
                ${order.orderNo}
            </td>
            <td class="column_name" width="17%">
                订单来源
            </td>
            <td class="column_input" width="17%">
                ${order.orderFrom}
            </td>
        </tr>
        <tr>
            <td class="column_name">
                购买人
            </td>
            <td class="column_input">
                ${order.buyUser}
            </td>
            <td class="column_name">
                有效期
            </td>
            <td class="column_input">
                <script>formatDate(${order.startDate});</script>
                至
                <script>formatDate(${order.endDate});</script>
            </td>
        </tr>
        <tr>
            <td class="column_name">
                邮寄地址
            </td>
            <td class="column_input">
                ${order.address}
            </td>
            <td class="column_name">
                邮政编码
            </td>
            <td class="column_input">
                ${order.postcode}
            </td>
        </tr>

        <tr>
            <td class="column_name">
                体检人姓名
            </td>
            <td class="column_input">
                <input type="text" name="endUser" id="endUser" value="${order.endUser}" required/>
            </td>
            <td class="column_name">
                性别
            </td>
            <td class="column_input">
                <input type="radio" name="sex" value="男" checked/>男
                <input type="radio" name="sex" value="女"<c:if test="${order.sex=='女'}"> checked </c:if> />女
            </td>
        </tr>
        <tr>
            <td class="column_name">
                年龄
            </td>
            <td class="column_input">
                <input type="number" max="100" min="1" id="age" name="age" value="${order.age}" required/>
            </td>
            <td class="column_name">
                身份证号
            </td>
            <td class="column_input">
                <input type="text" name="idCard" id="idCard" value="${order.idCard}" required/>
            </td>
        </tr>
        <tr>
            <td class="column_name">
                电话号码
            </td>
            <td class="column_input">
                <input type="text" name="phone" id="phone" value="${order.phone}"/>
            </td>
            <td class="column_name">
                手机
            </td>
            <td class="column_input">
                <input type="text" name="mobile" id="mobile" value="${order.mobile}"/>
            </td>
        </tr>
    </table>
    <table id="edittable" style="width:100%;" align="center">
        <tr>
            <td colspan="4" class="column_head" style="font-size:14px;font-weight:bold;height:20px;">
                预约信息
                <input type="hidden" name="reservationId" id="reservationId" value="${reservation.id}"/>
            </td>
        </tr>
        <tr>
            <td class="column_name">
                合作机构
            </td>
            <td class="column_input">
                <select id="idInstitution" name="idInstitution" onchange="getProduct()" style="width:200px;" required>
                    <option value="-1">请选择合作商家</option>
                    <c:forEach items="${institutionList}" var="inst">
                        <option value="${inst.id}"
                                <c:if test="${inst.id==order.idInstitution}">selected="selected"</c:if>  >${inst.name}</option>
                    </c:forEach>
                </select>
                <input class="input-xlarge focused" id="keyword" name="keyword" type="text">
                <button class="btn" id="search" onclick="searchInstitution()" type="button">搜索</button>
            </td>
            <td class="column_name">
                套餐名称
            </td>
            <td class="column_input">
                <select id="idProduct" name="idProduct" style="width:200px;" required>
                    <c:forEach items="${productList}" var="product">
                        <option value="${product.id}"
                                <c:if test="${product.id==order.idProduct}">selected="selected"</c:if> >${product.name}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td class="column_name">

            </td>
            <td class="column_input">
                ${order.institutionName}
            </td>
            <td class="column_name">

            </td>
            <td class="column_input">
                ${order.productName}<input type="hidden" id="hidProductName" value="${order.productName}"/>
            </td>
        </tr>
        <tr>
            <td class="column_name">
                成交价
            </td>
            <td class="column_input">
                ${order.salePrice}
            </td>
            <td class="column_name">
                销售价格
            </td>
            <td class="column_input">
                ${order.salePrice}
            </td>
        </tr>
        <tr>
            <td class="column_name">
                预约日期
            </td>
            <td class="column_input">
                <%--<input type="date" name="reserveDate" id="reserveDate"/>--%>
                <input type="text" id="reserveDate" name="reserveDate" value=""
                       class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:'false'})"/>
            </td>
            <td class="column_name">
                预约分院
            </td>
            <td class="column_input" id="reserveDiv">
                <input type="text" name="branch" id="branch"/>
                <select id="branch1" name="branch1" style="display: none">

                </select>
            </td>
        </tr>
        <tr>
            <td class="column_name">
                预约备注
            </td>
            <td class="column_input" colspan="3">
                <input type="text" name="comments" id="comments"/>
            </td>
        </tr>
        <tr>
            <td class="column_name">
                录单备注
            </td>
            <td class="column_input" colspan="3">
                <input type="text" id="comment" name="comment" value="${order.comment}"/>
            </td>
        </tr>
        <tr>
            <td colspan="4" class="column_bottom">
                <input name="submit" id="submitbut" type="button" value="提交" onclick="saveReservation()"/>
                <input name="reset" type="reset" id="reset" value="重置"/>
            </td>
        </tr>
    </table>
    <input type="hidden" id="groupOrderId" name="groupOrderId" value="${order.groupOrderId}"/>
</form>
</body>
</html>
<script>
    function searchInstitution() {
        var keyword = $("#keyword").val();
        $("#idInstitution option").remove();
        $.post("${BasePath}/order/institution/getJSON", {keyword: keyword}, function (data) {
            $.each(data.data, function (InfoIndex, Info) {
                $("#idInstitution").append('<option value=' + Info.id + '>' + Info.name + '</option>');
            });
            getProduct();
        });
    }
    function getProduct() {
        var val = $("#idInstitution").val();
        $("#idProduct option").remove();
        if (val == "-1") {
            $("#branch1").hide();
            $("#branch").show();
            return;
        }
        var groupOrderId = $("#groupOrderId").val();
        $.getJSON("${BasePath}/order/product/getJSON", {institutionId: val, groupOrderId: groupOrderId}, function (data) {
            var hidProName = $("#hidProductName").val();
            $.each(data.data, function (InfoIndex, Info) {
                var selected = (hidProName == Info.name);
                $("#idProduct").append('<option value=' + Info.id + ' ' + (selected?'selected':'')+'>' + Info.name + '</option>');
            });
            if (data.institutionList != null) {
                $("#branch").hide();
                $("#branch1").show();
                $("#branch1 option").remove();
                $.each(data.institutionList, function (InfoIndex, Info) {
                    $("#branch1").append('<option value=' + Info.name + '>' + Info.name + '</option>');
                });
            } else {
                $("#branch1").hide();
                $("#branch").show();
            }
        });
    }
    function saveReservation() {
        var endUser = $("#endUser").val();
        var age = $("#age").val();
        if (endUser == "") {
            layer.msg('体检人姓名不能为空!', {icon: 5});
            return false;
        }
        if (age == "" || age < 0 && age > 100) {
            layer.msg('请输入正确的年龄!', {icon: 5});
            return false;
        }
        var idCard = $("#idCard").val();
        if (idCard == "") {
            layer.msg('请输入身份证号!', {icon: 5});
            return false;
        }
        /*var phone = $("#phone").val();
        var mobile = $("#mobile").val();
        if (phone == "" && mobile == "") {
            layer.msg('请填写联系电话!', {icon: 5});
            return false;
        }*/
        var idInstitution = $("#idInstitution").val();
        var idProduct = $("#idProduct").val();
        if (idInstitution == -1) {
            layer.msg('请选择合作机构!', {icon: 5});
            return false;
        }
        if (idProduct == "" || idProduct == null) {
            layer.msg('请选择合体检套餐!', {icon: 5});
            return false;
        }
        var reserveDate = $("#reserveDate").val();
        if (reserveDate == "") {
            layer.msg('请选择预约日期!', {icon: 5});
            return false;
        }
        $('#myForm').ajaxSubmit(function (data) {
            if (data.errno == 1) {
                updateAlert(data.errdesc, 'alert-error');
            } else {
                window.location = "${BasePath}/order/order/toBespeak?yueType=2&id=${order.id}"
            }
        });
    }
</script>
